<template>
  <div style="background: linear-gradient(180deg, cornflowerblue 0, 20%, #fff 100%);height: 100vh">
    <!--头部-->
    <header-com ref="header"></header-com>
    <!-- 企业详情-->
    <div class="app-box">
      <div class="main-box">
        <div class="cardBox">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <h2 style="margin: 0">企业详情：</h2>
            </div>
            <div>
              <!-- 第一行-->
              <div class="flexBox">
                <el-col :span="8" style="font-size: 20px">
                  {{ companyList.companName }}
                </el-col>
                <el-col :span="6">
                  <el-rate
                      :value="companyList.companyRating/2"
                      show-score
                      disabled
                      text-color="#ff9900"
                      :max="5"
                      allow-half
                      :score-template="`${companyList.companyRating}分`">
                  </el-rate>
                </el-col>
                <el-col :span="10">
                  <div class="tagBox" style="display: flex;justify-content: space-between">
                    <el-tag class="tag-margin" v-if="companyList.wage==2" type="danger">欠薪</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.wage==1" type="warning">拖延发放</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.wage==0" type="success">按时发放</el-tag>

                    <el-tag class="tag-margin" v-if="companyList.overtimesSituation==3" type="success">不加班</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.overtimesSituation==1" type="warning">经常强制加班
                    </el-tag>
                    <el-tag class="tag-margin" v-if="companyList.overtimesSituation==0" type="danger">根据项目加班
                    </el-tag>

                    <el-tag class="tag-margin" v-if="companyList.reserveFund==1" type="danger">无公积金</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.reserveFund==0" type="success">有公积金</el-tag>

                    <el-tag class="tag-margin" v-if="companyList.socialSecurity==1" type="danger">不按时上社保</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.socialSecurity==0" type="success">按时上社保</el-tag>

                    <el-tag class="tag-margin" v-if="companyList.weekendsClosed==3">一天半</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.weekendsClosed==2" type="warning">大小周</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.weekendsClosed==1" type="danger">单休</el-tag>
                    <el-tag class="tag-margin" v-if="companyList.weekendsClosed==0" type="success">双休</el-tag>
                  </div>
                </el-col>
              </div>
            </div>
            <br>

          </el-card>
        </div>
        <!--评论区-->
        <div class="common-box" v-loading="loading">
          <!-- 单个盒子-->
          <div class="item-com-box" v-for="item in commList" :key="item.id">
            <!--名称-->
            <div style="border-right: 1px solid red;width: 20%;  border-right: 1px solid;border-color: #dcdfe6;"
                 class="item-flex">
              <!--头像-->
              <div>
                <el-avatar
                    :src="
              avatarUrl
                ? avatarUrl
                : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            "
                    :size="40"
                ></el-avatar>
              </div>
              <!--昵称职位-->
              <div>
                <!--昵称-->
                <div>{{ item.nickName }}</div>
                <!--职位-->
                <div class="zhiwei-box">{{ item.youWork }}</div>
              </div>
            </div>
            <!--吐槽详情-->
            <div>
              <div style="width: 800px">
                {{ item.detailedDescription }}
              </div>

            </div>
            <!--评分以及点赞-->
            <div>
              <!--评分-->
              <div>
                <el-rate
                    :value="item.companyRating/2"
                    show-score
                    disabled
                    text-color="#ff9900"
                    :max="5"
                    allow-half
                    :score-template="`${item.companyRating}分`">
                </el-rate>
              </div>
              <!--点赞-->
              <div style="font-size: 12px;text-align: center;color: #999999;margin-top: 10px">
                {{ item.createTime }}
              </div>
            </div>
          </div>
        </div>
        <!-- 分页-->
        <div class="pageBox" v-if="total>0">
          <!--          <el-pagination-->
          <!--              background-->
          <!--              layout="prev, pager, next"-->
          <!--              @pagination="getCom"-->
          <!--              @current-change="handleCurrentChange"-->
          <!--              :total="total">-->
          <!--          </el-pagination>-->

          <pagination
              layout="prev, pager, next"
              v-show="total>0"
              :total="total"
              :page.sync="querya.pageNum"
              :limit.sync="querya.pageSize"
              @pagination="getList"
          />


        </div>
        <div class="commentPost">
          <header>发表回复</header>
          <!--评论表单 添加-->
          <div>
            <el-form ref="form" :model="form" label-width="100px">
              <el-row>
                <el-col :span="12" class="rate-col">
                  <el-form-item label="企业评分：" class="rate-box">
                    <el-rate
                        :value="value"
                        @input="(val)=>value=val"
                        show-score
                        text-color="#ff9900"
                        :max="5"
                        allow-half
                        :score-template="`${(value)*2}分`">
                    </el-rate>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!--职位选择-->
                  <el-form-item label="曾任职位：">
                    <el-select v-model="form.youWork" placeholder="请选择曾任职位">
                      <el-option :label="item.name" :value="item.name" v-for="item in zhiweiList"
                                 :key="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-form-item label="详情描述：">
                <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" maxlength="500" @input="timeEffectInput"
                          show-word-limit
                          placeholder="请输入详情描述"
                          v-model="form.detailedDescription"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="yanzhnegBox">
                  <img :src="captchaImg" @click="refreshCaptcha" alt=""/>
                  <el-input
                      class="code-input"
                      placeholder="请输入验证码"
                      v-model="userCaptcha"
                      clearable>
                  </el-input>
                  <!--                  <input placeholder="请输入验证码" style="border: 1px solid; margin: 0 10px" type="text"-->
                  <!--                         v-model="userCaptcha"/>-->
                  <!--                  <button style="width: 100px">验证</button>-->
                </div>
                <p v-if="showMessage">{{ message }}</p>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">发表</el-button>
              </el-form-item>
              <!--验证码 发布-->
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerCom from "@/components/headerCom/index.vue";
import {addReviews, getCompanyInfo, getReviewsInfo, zhiWei} from "@/api";
import Pagination from "@/components/Pagination/index.vue";

export default {
  name: "indexPage",
  components: {
    Pagination,
    headerCom
  },
  data() {
    return {
      addValue: 5,
      companId: null,
      augValue: 5,
      querya: {
        pageNum: 1,
        pageSize: 10,
        companId: ''
      },
      total: 100,
      addList: {},
      zhiweiList: [],
      companyList: [],
      commList: [],
      loading: false,
      // 验证码
      captchaImg: '',
      userCaptcha: '',
      captchaText: '',
      showMessage: false,
      message: '',
      // 添加评论
      formMap: {
        companyId: '',
        detailedDeseription: '',
        youwork: '',
        compenyRating: 0,
      },
      commentList: {
        value: 0
      },
      value: 0,
      // 接口传递数值
      datalist: {
        pageNum: 1,
        pageSize: 20,
        companyId: ''
      },
      context: "", // 评论内容
      replyContext: "", //一级评论回复
      isShowSec: "", //是否显示次级回复框
      isClickId: "", //记录点击回复的评论id
      userId: "1", // 浏览器指纹
      username: "孤城浪人", //你的用户名
      firstIdx: 1,
      secIdx: 1,
      avatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      //新增评论
      form: {
        companyRating: '',
        //曾任职位
        youWork: '',
        // 企业名称
        companyId: '',
        // 详情描述
        detailedDescription: '',
        companyName: ''
      },
    }
  },
  created() {
    this.companId = this.$route.query.id
    this.getcomInfo()
    this.getList()
    this.generateCaptcha();
    this.getzhiweiList()
  },
  methods: {
    timeEffectInput() {
      const length = this.form.detailedDescription.length  // 先拿到当前输入时文本域文字长度
      if (length >= 500) {  // 当长度超过200
        // 获取文本域计数统计设置字体为红色
        this.$el.querySelector('.el-input__count').style = 'color:red !important'
        // 防止后续输入溢出截取0-200的字符
        this.form.detailedDescription = this.form.detailedDescription(0, 500)
      } else {
        // 不超过则设置为原字体颜色
        this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
      }
    },
    // 获取职位列表
    getzhiweiList() {
      zhiWei().then(res => {
        this.zhiweiList = res.data;
      })
    },
    resForm() {
      this.generateCaptcha();
      this.userCaptcha = '';
      this.value = 0
      this.form = {
        companyRating: '',
        //曾任职位
        youWork: '',
        // 企业名称
        companyId: '',
        // 详情描述
        detailedDescription: '',
        companyName: ''
      }
    },
    onSubmit() {
      this.form.companyId = this.companId
      this.form.companyRating = this.value * 2
      this.form.companyName = this.companyList.companName
      if (this.userCaptcha.toLowerCase() === this.captchaText.toLowerCase()) {
        addReviews(this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">恭喜你，评论成功！</strong>',
              type: 'success'
            });
            this.getList()
            this.getcomInfo()
            this.resForm()
          } else if (res.code == 401) {
            this.$refs.header.loginlogVisible = true
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          }
        })
      } else {
        window.alert('验证码错误')
      }
    },
    // 获取评论
    getList() {
      this.querya.companId = this.companId
      getReviewsInfo(this.querya).then(res => {
        this.commList = res.rows
        this.total = res.total
      })
    },
    // 获取详情
    getcomInfo() {
      getCompanyInfo(this.companId).then(res => {
        this.companyList = res.data
      })
    },
    //分页器
    // 分页器
    handleSizeChange(val) {
      this.querya.pageNum = 1
      this.querya.pageSize = val
      // console.log( this.query.pageSize)
    },
    handleCurrentChange(val) {
      // console.log(val)
      this.querya.pageNum = val
      // console.log( this.query.pageNum)
    },
    // 验证码发布提交
    generateCaptcha() {
      const letters = '0123456789';
      let captcha = '';
      for (let i = 0; i < 4; i++) {
        captcha += letters.charAt(Math.floor(Math.random() * letters.length));
      }
      this.captchaText = captcha;
      const canvas = document.createElement('canvas');
      canvas.width = 150;
      canvas.height = 50;
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.font = '25px Arial';
      ctx.fillStyle = '#000';

      for (let i = 0; i < captcha.length; i++) {
        ctx.save();
        const rotate = Math.random() * 30 - 15;
        ctx.rotate((rotate * Math.PI) / 180);
        ctx.fillText(captcha[i], 20 + i * 25, 30);
        ctx.restore();
      }
      this.captchaImg = canvas.toDataURL();
    },
    refreshCaptcha() {
      this.generateCaptcha();
      this.userCaptcha = '';
      this.showMessage = false;
    },
    verifyCaptcha() {
      if (this.userCaptcha.toLowerCase() === this.captchaText.toLowerCase()) {
        this.message = '验证成功';
        this.showMessage = true;
      } else {
        window.alert("验证码错误")
        this.showMessage = true;
      }
    },
  }
}
</script>
<style scoped>
.app-box {
  background: linear-gradient(180deg, cornflowerblue 0, 20%, #fff 100%);
}

.main-box {
  width: 1250px;
  margin: 0 auto;
}

.rate-box {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-left: 0;
}

.rate-col {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

::v-deep .el-tag--small {
  margin-right: 10px;
}

.divi-der {
  margin: 0 !important;
}

.common-box {
  background-color: white;
}

.item-com-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid;
  border-color: #dcdfe6;
}

.item-flex {
  display: flex;
}

.pageBox {
  padding: 10px;
  background-color: white;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.commentPost {
  padding: 10px;
  background-color: white;
}

.yanzhnegBox {
  ::v-deep .el-input__inner {
    height: 100% !important;
  }

  ::v-deep .el-input--suffix {
    height: 100% !important;
  }

  display: flex;

  .code-input {
    width: 200px;
  }

  img {
    width: 150px;
    height: 50px;
  }
}

.tag-margin {
  margin-right: 10px;
}
</style>